<template>
  <a-drawer
    placement="bottom"
    :visible="visible"
    height="100px"
    :headerStyle="{ height: '0px' }"
    :drawerStyle="{ background: '#001529',overflow: 'hidden' }"
    :maskStyle="{ zIndex: -1 }"
    :get-container="false"
    :closable="false"
    @close="onClose"
  >
    <iframe id="iframe" :src="audioSrc" style="width: 100%;height: 100%;position: fixed;border: medium none;margin-top:-125px" v-if="audioSrc.indexOf('&') > -1"/>
  </a-drawer>
</template>

<script>
  export default {
    name: 'ListenMusic',
    data () {
      return {
        visible: false,
        songShow: false,
        bodyHeight: window.innerHeight * 0.1 + 'px',
        nameStyle: {
          'color': 'white',
          'zIndex': 99,
          'position': 'absolute',
          'marginLeft': window.innerWidth * 0.013 + 'px',
          'fontSize': window.innerWidth * 0.008 + 'px'
        },
        imageStyle: {
          'height': window.innerHeight * 0.08 + 'px',
          'width': window.innerHeight * 0.08 + 'px'
        },
        audioStyle: {
          'width': window.innerWidth / 2 - window.innerHeight * 0.08 + 'px',
          'marginLeft': window.innerHeight * 0.05 + 'px'
        },
        volumeLeftStyle: {
          'width': window.innerWidth * 0.824 - 180 + 'px',
          'height': '135px',
          'position': 'absolute',
          'margin-top': '-125px',
          'z-index': '200'
        },
        volumeRightStyle: {
          'width': window.innerWidth * 0.175 + 120 + 'px',
          'height': '135px',
          'position': 'absolute',
          'margin-top': '-125px',
          'marginLeft': window.innerWidth * 0.824 - 120 + 'px'
        },
        audioSrc: 'http://127.0.0.1:9998/api/thymeleaf/audio?',
        songId: 0,
        songName: '',
        isOnDraw: true
      }
    },
    created () {
    },
    mounted () {
      const style = window.document.getElementsByClassName('ant-drawer')[0].parentElement.style
      style.zIndex = '-100'
      style.position = 'absolute'
    },
    methods: {
      listenSong (record) {
        if (record.songId !== this.songId) {
          this.reset()
          this.songShow = false
          this.audioSrc += 'audioUrl=' + record.audioUrl
          this.audioSrc += '&imageUrl=' + record.imageUrl
          this.songName = record.songName
          this.songId = record.songId
          this.songShow = true
        }
        this.visible = true
        window.document.getElementsByClassName('ant-drawer')[0].parentElement.style.zIndex = '100'
      },
      onClose () {
        this.visible = false
        setTimeout(() => {
          window.document.getElementsByClassName('ant-drawer')[0].parentElement.style.zIndex = '-100'
        }, 500)
      },
      reset () {
        this.audioSrc = 'http://127.0.0.1:9998/api/thymeleaf/audio?'
      }
    }
  }
</script>

<style>
  input::-webkit-input-placeholder{
    text-align: center;
  }
  table{
    border: 2px solid rgba(236,236,236,0.84);
  }
  tr{
    height: 75px;
  }
  th{
    background: rgba(250,250,250,0.84);
    color: black;
  }
  #chart {
    margin-top: 15px;
    margin-bottom: 8px;
    width: 90%;
    height: 330px;
  }
  #font {
    margin-top: 3px;
    margin-left: 10px;
    width: 150px;
    font-size: 12px;
    font-weight: normal;
    color: #99a2aa;
  }
</style>

<style lang="scss" scoped>
  ::v-deep .ant-drawer-mask {
    background-color: unset !important;
  }
  ::v-deep .ant-drawer-body {
    height: 200px;
    padding: 0;
  }
  ::v-deep .ant-drawer-wrapper-body {
    overflow: hidden !important;
  }
  ::v-deep .ant-drawer-content {
    overflow: hidden !important;
  }
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
    width: 50%
  }
</style>
